<template>
  <div class="fly-panel fly-signin">
    <div class="fly-panel-title">
      签到
      <i class="fly-mid"></i>
      <a
        href="javascript:;"
        class="fly-link"
        @click="showinfo"
        id="LAY_signinHelp"
        >说明</a
      >
      <i class="fly-mid"></i>
      <a
        href="javascript:;"
        class="fly-link"
        id="LAY_signinTop"
        @click="showinfo2"
        >活跃榜<span class="layui-badge-dot"></span
      ></a>
      <span class="fly-signin-days" v-show="isSign || isLogin"
        >已连续签到<cite>{{ count }}</cite
        >天</span
      >
    </div>
    <div class="fly-panel-main fly-signin-main">
      <template v-if="!isSign">
        <button
          class="layui-btn layui-btn-danger"
          id="LAY_signin"
          @click="_getSign"
        >
          今日签到
        </button>
        <span
          >可获得<cite>{{ favs }}</cite
          >飞吻</span
        >
      </template>
      <template v-else>
        <button class="layui-btn layui-btn-disabled">今日已签到</button>
        <span
          >获得了<cite>{{ favs }}</cite
          >飞吻</span
        >
      </template>
      <sign-info :isShow="isShow" @closeModel="close"></sign-info>
      <sign-list :isShow2="isShow2" @closeModel="close2"></sign-list>
    </div>
  </div>
</template>

<script>
import SignInfo from "./Sign/SignInfo";
import SignList from "./Sign/SignList";
import { getSign } from "@/api/user";
import moment from "moment";
export default {
  name: "Sign",
  components: {
    SignInfo,
    SignList,
  },
  data () {
    return {
      // isLogin:false,
      isShow: false,
      isShow2: false,
      data: '',
      isSign: false,
    };
  },
  watch: {
    //   userInfo (newval, oldval) {
    //     if (newval.isSign === true) {
    //       this.isSign = true
    //     } else {
    //       this.isSign = false
    //     }
    //   }
  },
  mounted () {
    //判断用户上次签到时间与签到状态
    //如用户上一次签到时间与当天的签到日期相差1天，允许用户签到
    // this._getSign()
    const isSign = this.$store.state.userInfo.isSign;
    const lastSign = this.$store.state.userInfo.lastSign;
    const nowDate = moment().format("YYYY-MM-DD");
    const lastDate = moment(lastSign).format("YYYY-MM-DD");
    const diff = moment(nowDate).diff(moment(lastDate), "day");
    if (diff > 0 && isSign) {
      this.isSign = false;
    } else {
      this.isSign = isSign;
    }
  },
  methods: {
    showinfo () {
      this.isShow = true;
    },
    close () {
      this.isShow = false;
    },

    close2 () {
      this.isShow2 = false;
    },
    showinfo2 () {
      this.isShow2 = true;
    },
    _getSign () {
      // console.log("ssss");
      // if (!this.isLogin) {
      //   this.$pop("shake", "请登录");
      //   return;
      // }
      getSign().then((res) => {
        // console.log(res);
        let user = this.$store.state.userInfo;
        if (res.code === 200) {
          (user.favs = res.favs), (user.count = res.count);
          this.$pop("", "签到成功");
        } else {
          //已近签到
          this.isSign = true;
          this.$pop("shake", "已经签到");
        }
        user.isSign = true;
        user.lastSign = res.lastSign; //签到赋值
        this.isSign = true;
        this.$store.commit("setUserInfo", user);
      });
    },
  },
  computed: {
    isLogin () {
      return this.$store.state.isLogin;
    },
    favs () {
      let count = parseInt(this.count) + 1;
      let result = 0;
      if (count < 5) {
        result = 5;
      } else if (count >= 5 && count < 15) {
        result = 10;
      } else if (count >= 15 && count < 30) {
        result = 15;
      } else if (count >= 30 && count < 100) {
        result = 20;
      } else if (count >= 100 && count < 365) {
        result = 30;
      } else if (count >= 365) {
        result = 50;
      }
      return result;
    },
    count () {
      if (this.$store.state.userInfo !== {}) {
        if (typeof this.$store.state.userInfo !== undefined) {
          return this.$store.state.userInfo.count;
        } else {
          return 0;
        }
      } else {
        return 0;
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"></style>
